<template>
  <div>
    <div>
      <button @click="$router.go(-1)">返回</button>
    </div>
    <h1>list.vue</h1>
    <h1>获取路由传递的query参数----{{ $route.query.id }}</h1>
    <div>歌单名称：{{ playlist.name }}</div>
    <div>
      歌单背景：
      <img class="coverImg" :src="playlist.coverImgUrl" alt="" />
    </div>
    <div>
      作者头像：
      <img class="avatarUrl" :src="avatarUrl" alt="" />
    </div>
    <p>昵称：{{ nickname }}</p>
    <ul>
      <li
        @click="$router.push(`/play?id=${item.id}`)"
        v-for="item in songlist"
        :key="item.id"
      >
        歌曲名称：{{ item.name }}
      </li>
    </ul>
    <hr />
    <ul>
      <li class="comment" v-for="item in commentList" :key="item.commentId">
        <p>
          评论者：
          <img class="avatarUrl" :src="item.user.avatarUrl" alt="" />
          {{ item.user.nickname }}
        </p>
        评论的内容：{{ item.content }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //歌单详情
      playlist: [],
      avatarUrl: "",
      nickname: "",
      songlist: [],
      commentList: [],
    };
  },
  mounted() {
    this.getPlayDetail();
    this.getComment();
  },
  methods: {
    //封装一个歌单详情
    async getPlayDetail() {
      const { data: res } = await this.$axios.get("playlist/detail", {
        params: {
          id: this.$route.query.id,
        },
      });
      console.log(res, "歌单详情响应");
      if (res.code === 200) {
        this.playlist = res.playlist;
        this.avatarUrl = res.playlist.creator.avatarUrl;
        this.nickname = res.playlist.creator.nickname;
        this.songlist = res.playlist.tracks;
      }
    },
    //封装一个歌单评论
    async getComment() {
      const { data: res } = await this.$axios.get("comment/playlist", {
        params: {
          id: this.$route.query.id,
        },
      });
      console.log(res, "获取歌单评论");
      if (res.code === 200) {
        this.commentList = res.comments;
      } else {
        this.$message.error("获取歌单评论失败");
      }
    },
  },
};
</script>

<style scoped>
.coverImg {
  width: 2.52rem;
  height: 2.52rem;
}
.avatarUrl {
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
}
.comment {
  border: 2px solid #ccc;
}
</style>